<template>
  <view class="container1">
    <view class="page-header">自定义卡片组件</view>
    <view class="news-list">
      <!-- 遍历新闻列表，为广告项添加分割线 -->
      <view v-for="(item, idx) in newsData" :key="item.title">
        <!-- 广告项上下显示分割线 -->
        <view v-if="item.isAd" class="ad-divider"></view>
        <NewsCard 
          :item="item" 
          :mode="item.mode" 
        />
        <view v-if="item.isAd" class="ad-divider"></view>
      </view>
    </view>
  </view>
</template>

<script>
import data from "../../../data/news.json"
import NewsCard from "../../../components/cardViewText.vue";
export default {
  components: { NewsCard },
  data() {
    return {
		newsData:null
    }
  },
  onLoad() {
  	this.newsData = data.newsData;
  },
  methods: {
	  
  }
}
</script>

<style scoped>
.container1 {
  background: #fff;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.page-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}
.news-list {
  background: #fff;
  border-radius: 8px;
  padding: 0;
}
/* 广告分割线样式，匹配图二灰色细线条 */
.ad-divider {
  width: 100%;
  height: 1px;
  background: #eee;
  margin: 5px 0;
}
</style>